<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Poverty</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<script src="https://js.arcgis.com/3.15/"></script>

<style>
#viewDiv, html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>

<script>
require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/renderers/SimpleRenderer",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/Color",
    "dojo/domReady!"
  ],
  function(
    Map, FeatureLayer, SimpleRenderer, SimpleFillSymbol, SimpleMarkerSymbol, SimpleLineSymbol, Color
  ) {
  
    var symbol = new SimpleMarkerSymbol().setColor( [227, 139, 79] ).setOutline(new SimpleLineSymbol().setColor("#333333").setWidth(0.5));
    
    var renderer = new SimpleRenderer(symbol);
    renderer.setVisualVariables([
       {
          type: "sizeInfo",
          field: "POP_POVERTY",
          normalizationField: "TOTPOP_CY",
          minSize: 4,
          maxSize: 50,
          minDataValue: 0.15,
          maxDataValue: 0.5
       }, {
          type: "opacityInfo",
          field: "POP_POVERTY",
          normalizationField: "TOTPOP_CY",
          opacityValues: [ 0.05 , 0.95 ],
          minDataValue: 0.1,
          maxDataValue: 0.3
       }, 
      ]);
    
    var lyr = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0");
    lyr.setRenderer(renderer);
  
    var polyOutline = new SimpleFillSymbol().setColor([0,0,0,0]).setOutline(new SimpleLineSymbol().setColor([ 90,90,90 ]).setWidth(0.5));
  
    var outlineLyr = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0");
    outlineLyr.setRenderer(new SimpleRenderer(polyOutline));

    var map = new Map("viewDiv", {
      basemap: "dark-gray",
      zoom: 6,
      center: [-87, 36]
     });
    map.addLayers([outlineLyr, lyr]);
  });
</script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>